<template>
    <div id='temp'>
        <div class="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li v-for="(item,index) in list" :key="index" class="mui-table-view-cell mui-media mui-col-xs-6">
		            <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
		                <img class="mui-media-object" :src="item.img_url">
                        <div id="zhaiyao" class="mui-media-body">{{item.title}}</div>                 
                        <div class='des'>
                            <p class='price'>
                                <span>￥{{item.sell_price}}</span>
                                <s>￥{{item.market_price}}</s>
                            </p>
                            <p class='ft'>
                                <span>热卖区</span>
                                <span>{{item.stock_quantity}}</span>
                            </p>
                        </div>
                    </router-link>
                </li>
		        
		    </ul>    
		</div>
    </div>
</template>
<script>
    import { Toast } from 'mint-ui';
	import common from "../../kits/common.js";
    export default{
        data(){
            return {
                pageindex:1,
                list:[]
            }
        },
        created(){
            this.getImg(this.pageindex);
        },
        methods:{
            getImg(pageindex){
                pageindex=pageindex||1;
                var url=common.apidomain+'/api/getgoods?pageindex='+pageindex;
                this.$http.get(url).then(function(res){
                    var data=res.body;
					if(data.status!=0){
						Toast(data.message);
						return;
					}
					this.list=data.message;
                })
            }
        },

    }
</script>
<style scoped>

.mui-table-view li{

    border:1px solid #ccc;
    margin-top:5px;
    margin-left:4px;
    padding-left:0px;
    box-shadow:0 0 4px #ccc;
}
.mui-table-view li a{
    padding-left:0;
    margin-left:0;
}

.mui-table-view.mui-grid-view .mui-table-view-cell #zhaiyao{
    color:#0094ff;
}
.mui-table-view .des{
    background-color: rgba(0,0,0,.1);
    margin-top:10px;
}
.mui-table-view .price{
   text-align:left;
  
}
.mui-table-view .price span{
    color:red;
 
}
.mui-table-view .price s{
    margin-left:10px;
}
.mui-table-view .ft{
    margin-top:8px;
    text-align: left;
    position: relative;
    height: 30px;
    

}
.mui-table-view .ft span:first-child{
   position: absolute;
   bottom:0;
   left:10px;
}
.mui-table-view .ft span:last-child{
   position: absolute;
   bottom:0;
   right:10px;
}
</style>